<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul {
            list-style: none
        }

        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 1150px;
            height: 400px;
            margin: 50px auto;
            border: 1px solid red;
            overflow: hidden;
        }

        div li {
            width: 240px;
            height: 400px;
            float: left;
        }

        div ul {
            width: 1300px;
        }
    </style>
</head>
<body>
<div id="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<script>
    //1 获取元素
    var box = document.getElementById("box");
    var ul = box.children[0];
    var lis = ul.children;

    //2 操作每一个li，遍历lis
    for (var i = 0; i < lis.length; i++) {
        //3 设置背景图
        lis[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";

        //4 移入li的时候。让li运动
        lis[i].onmouseover = function () {
            //5 先让其他人变窄
            for (var i = 0; i < lis.length; i++) {
                animate(lis[i], "width", 100);
            }
            //6 让自己变宽
            //再次设置this的animate时，会将运动到100的定时器给清除掉，在设置到800
            animate(this, "width", 800);

        };
        //7 移出某一个li的时候，让所有的li渐渐的运动到宽240的位置
        lis[i].onmouseout = function () {
            for (var i = 0; i < lis.length; i++) {
                animate(lis[i], "width", 240);
            }
        };


    }


    //修改animate，可以修改任意的属性
    function animate(tag, attr, target) {
        clearInterval(tag.timer);
        tag.timer = setInterval(function () {
            //改点1 - 获取某个属性的当前状态
            //由于具有单位，需要取整
            //parseInt("hehe") => NaN    NaN || 0
            //为了应对auto转换为NaN的问题，我们使用短路操作，保证程序的健壮性
            var leader = parseInt(getStyle(tag, attr)) || 0;
            //缓动公式的一部分是更改step的值
            var step = (target - leader ) / 10;
            //由于offsetLeft在取值的时候会四舍五入，我们的step如果比较小，会造成无法运动的问题
            //根据步数的正负，更改取整方式
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            //缓动公式
            leader = leader + step;
            //改点2 - 设置给某一个属性
            tag.style[attr] = leader + "px";
            //检测是否走到了指定位置
            if (leader == target) {
                clearInterval(tag.timer);
            }
        }, 17);
    }

    //用于获取某个标签的某个样式属性值
    //带单位
    function getStyle(tag, attr) {
        //检测支持哪一个
        //box.currentStyle//如果不存在值为undefined
        //getComputedStyle如果浏览器不支持。相当于变量未声明，报错
        if (tag.currentStyle) {
            //ie支持
            return tag.currentStyle[attr];
        } else {
            //标准方法
            return getComputedStyle(tag, null)[attr];
        }
    }

</script>
</body>
</html>
